<template>
  <Layout type="Message">
    <div class="message">
      <div class="message-banner">
        <div class="message-text">
          <p class="title">消息通知</p>
          <!-- <p class="desc">这是一条重要通知的简介大概内容…</p> -->
        </div>
        <img src="@/assets/notice_illus@2x.png" class="message-img" />
      </div>
      <div v-if="messageType && messageType.gdType" class="message-process">
        <div class="message-title">
          <div class="title">流程消息</div>
          <div class="more"  @click="handleMessageList(0,0)">
            更多<span class="font_family icon-gengduo"></span>
          </div>
        </div>
        <div class="message-box">
          <div v-for="(item, index) in messageType.gdType"
            :key="index" class="item" :class="'color'+(index+1)" @click="handleMessageList(0,index)">
            <p class="num">{{item.number}}</p>
            <p class="title">{{item.name}}</p>
          </div>
        </div>
      </div>
      <div v-if="messageType && messageType.zdType" class="message-type">
        <div class="message-title">
          <div class="title">消息类别</div>
          <div class="more"  @click="handleMessageList(1,1)">
            更多<span class="font_family icon-gengduo"></span>
          </div>
        </div>
        <div class="message-box">
          <div
            class="item"
            v-for="(item, index) in messageType.zdType.data"
            :key="index"
            @click="handleMessageList(1,index+1)"
          >
            <p class="num">{{ item.msgcount }}</p>
            <p class="title">{{ item.msg_group }}</p>
          </div>
          <div v-if="messageType.zdType.data.length >= showIndex" class="item">
            <p
              @click="unfold"
              class="more"
            >
              展开<span class="font_family icon-gengduo"></span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <quit></quit>
  </Layout>
</template>
<script>
import Layout from "@/layout";
import { message } from "@/api/message.js";
import Quit from "@/components/quit";
export default {
  name: "Message",
  components: {
    Layout,
    Quit
  },
  data() {
    return {
      messageType: "",
      showIndex: 5,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleMessageList(type,index) {
      this.$router.push({
        path:"/message/list",
        query: {
          type: type,
          index:index
        },
      });
    },
    getData() {
      message().then((res) => {
        console.log(res);
        if (res.status == "success") {
          console.log(res.data);
          this.messageType = res.data;
        }
      });
    },
    unfold() {},
  },
};
</script>
<style lang="less" scoped>
.message {
  background: #f7f9f9;
  min-height: calc(100vh - (60px + env(safe-area-inset-bottom)));
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
// message-banner
.message-banner {
  display: flex;
  height: 112px;
  background: #009966;
  .message-text {
    flex: 1;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .title {
      font-size: 17px;
      color: #fff;
      // margin: 30px 0 0;
    }
    .desc {
      font-size: 13px;
      color: #fff;
      margin: 8px 0 0;
    }
  }
  .message-img {
    height: 112px;
    width: 112px;
    display: flex;
  }
}
// message-title
.message-title {
  display: flex;
  .title {
    flex: 1;
    font-size: 17px;
    line-height: 20px;
    font-weight: bold;
    color: #313541;
  }
  .more {
    font-size: 12px;
    line-height: 20px;
    color: #8f92a1;
    span {
      font-size: 12px;
    }
  }
}
// message-process
.message-process {
  margin: 26px 15px 0;
  .message-box {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: calc((100vw - 48px) / 3);
      height: calc((100vw - 48px) / 3);
      margin-right: 9px;
      margin-bottom: 19px;
      border-radius: 9px;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &.color1 {
        background: #faeed0;
      }
      &.color2 {
        background: #e8f1ff;
      }
      &.color3 {
        background: #dbf4eb;
      }
      &.color4 {
        background: #e7e4f9;
      }
      &.color5 {
        background: #d3f5f8;
      }
      &.color6 {
        background: #faeed0;
      }
    }
    .num {
      font-size: 22px;
      font-weight: bold;
      color: #313541;
      margin: 0;
    }
    .title {
      font-size: 13px;
      color: #313541;
      margin: 0;
    }
  }
}
// message-type
.message-type {
  margin: 10px 15px 0;
  .message-box {
    background: #ffffff;
    border-radius: 9px;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: calc((100vw - 30px) / 3);
      height: calc((100vw - 30px) / 3);
    }
    .num {
      font-size: 22px;
      font-weight: bold;
      color: #313541;
      margin: 0;
    }
    .title {
      font-size: 13px;
      color: #313541;
      margin: 0;
    }
    .more {
      font-size: 13px;
      color: #8f92a1;
      span {
        display: inline-block;
        font-size: 13px;
        transform: rotate(90deg);
      }
    }
  }
}
</style>